<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>验证码生成及校验</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.Box{
				margin: auto;
				text-align: center;
				width: 300px;
				height: 200px;
				position: relative;
			}
			.Code {
				background-color: rgba(123, 118, 121, 0.5);
				line-height: 60px;
				width: 300px;
				height:60px;
				color: rgb(232, 57, 57);
				font-size: 30px;
			}
			a {
				letter-spacing: 4px;
				text-decoration: none;
				color: #b9dc4e;
				height:20px;
				width: 300px;
			}
			
			.box {
				width: 300px;
				height:100px;
				color: #090909;
				background-color: rgba(87, 47, 122, 0.5);
				margin: auto;
				text-align: center;
			}
			

		
		</style>
	</head>
	<body>
		<div class="Box">
			
			<div class="box">
				<label for="inputCode">验证码：</label>
				<input type="text" id="inputCode" placeholder="请输入验证码" style="width: 280px;height: 40px;">
				<input type="button" id="Button1" value="确定" style="width: 80px;height: 30px;">
			</div>
			<div class="Code"><span ></span></div>
			<a href="">看不清换一张</a>
		</div>
		<script>
			function getCode(){
				var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f','g','h','i','j','k','l','s','t'];
				var str = '';
					for (let i = 0; i < 9; ++i) {
					//取0到20
					let num = Math.round(Math.random() * (20- 0) + 0);//得到0-20的一个随机数
					str += arr[num];//拼接字符串
				}
				return str;
			}
			window.onload=function(){
				let res=getCode();
				document.querySelector('span').innerText=res;
				document.querySelector("a").onclick=function(){
					document.querySelector('span').innerText=res;
				}
				document.getElementById('Button1').onclick=function(){
					let code=document.querySelector('span').innerText;
					let inputCode=document.getElementById('inputCode').value;
					//console.log(code);
					//console.log(inputCode);
					if(code!=inputCode){
						alert('输入错误！');
						document.getElementById('inputCode').value='';
						return false;
					 }  else{
					 	location.href='https://www.qqmusic.com/'; //验证码输入成功进入官网
					 }
				}
			}
		</script>
	</body>
</html>

